<template>
  <div class="app-container">
    <avue-crud :data="data" :page.sync="page"
               @on-load="onLoad"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @refresh-change="refreshChange"
               @row-save="rowSave"
               @row-update="rowUpdate"
               @row-del="rowDel"
               :option="option" v-model="warehouseForm" :search.sync="search"
               :before-open="beforeOpen">
      <template slot="menuLeft" slot-scope="{}">
        <el-button icon="el-icon-delete" size="small" type="danger" @click="rowDel" :disabled="multiple">删除</el-button>
      </template>
      <template slot-scope="{row}" slot="inputForm">
        <el-tag>{{row}}</el-tag>
      </template>
    </avue-crud>
  </div>
</template>
<script>
import {listWarehouse, getWarehouse, saveWarehouse, delWarehouse } from "@/api/oms/warehouse";

export default {
  name: "warehouse",
  data() {
    return {
      page: {
      },
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sn: null,
        warehouseName: null
      },
      data: [],
      warehouseForm: {},
      option: {
        searchMenuSpan:4,
        selection: true,
        tip: false,
        reserveSelection:true,
        searchLabelWidth: 100,
        column: [{
          label: '仓库编号',
          prop: "sn",
          search:true,
          disabled:true,
        },{
          label: '仓库名称',
          prop: "warehouseName",
          search:true,
          rules: [{
            required: true,
            message: "请输入仓库名称",
            trigger: "blur"
          }]
        }
        ]
      },
      search: {}
    };
  },
  created() {
  },
  methods: {
    error(err){
      console.log(err)
    },
    rowSave(form,done,loading){
      saveWarehouse(form).then(res => {
        if (res.code === 200) {
          setTimeout(()=>{
            this.refreshChange()
            this.$message.success(res.msg)
          },1000)
          setTimeout(()=>{
            done()
          },2000)
        }
      });
    },
    rowUpdate(form,index,done,loading){
      saveWarehouse(form).then(res => {
        if (res.code === 200) {
          setTimeout(()=>{
            this.refreshChange()
            this.$message.success(res.msg)
          },1000)
          setTimeout(()=>{
            done()
          },2000)
        }
      });
    },
    rowDel(form,index){
      const ids = form.id || this.ids;
      this.$confirm('是否确认删除当前数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delWarehouse(ids);
      }).then(() => {
        setTimeout(()=>{
          this.refreshChange()
          this.$message.success('删除成功')
        },1000)
        setTimeout(()=>{
          done()
        },2000)
      })
    },
    /** 查询供应商信息列表 */
    onLoad(page) {
      this.queryParams.pageNum = page.currentPage ? page.currentPage:1
      this.queryParams.pageSize = page.pageSize
      listWarehouse(this.queryParams).then(response => {
        this.data = response.rows;
        this.page.total = response.total;
      });
    },

    // 多选
    selectionChange(list){
      this.ids = list.map(item => item.id)
      this.multiple = !list.length
    },

    // 条件搜索
    searchChange(params,done) {
      done();
      listWarehouse(params).then(response => {
        this.data = response.rows;
        this.page.total = response.total;
      });
    },

    // 刷新
    refreshChange(){
      this.queryParams.pageNum = this.page.currentPage ? this.page.currentPage:1
      this.queryParams.pageSize = this.page.pageSize
      this.queryParams.sn = this.search.sn
      this.queryParams.supplierName = this.search.supplierName
      listWarehouse(this.queryParams).then(response => {
        this.data = response.rows;
        this.page.total = response.total;
      });
    },

    // 编辑或查看时
    beforeOpen(done,type){
      if(['view','edit'].includes(`${type}`)){
        // 查看和编辑逻辑
        getWarehouse(this.warehouseForm.id).then(response => {
          this.msgSuccess("获取数据成功");
          this.warehouseForm = response.data
        });
      }else{
        //新增逻辑
        //一定要用setTimeout包裹，由于form组件底层一些机制的设计
        setTimeout(()=>{
        },0)
      }
      done();
    }
  }
}
</script>
